<template>
	<view class="container">
		<view class="details_title">
			<u-parse :html="details.name"></u-parse>
		</view>
		<view class="details_list_box">
			<view class="details_list">
				<text>类别：</text>{{typeName(details.type)}}
			</view>
			<view class="details_list">
				<text>审批部门：</text>{{details.orgName}}
			</view>
			<view class="details_list">
				<text>项目名称：</text>
				<view>
					<u-parse :html="details.name"></u-parse>
				</view>
			</view>
			<view class="details_list">
				<text>权利基本编码：</text>
				<view>
					<u-parse :html="details.basicCode"></u-parse>
				</view>
			</view>
			<view class="details_list">
				<text>设定依据：</text>
				<view>
					<u-parse :html="details.ordinanceXml"></u-parse>
				</view>
			</view>
		</view>
		<view class="details_small_title">
			审批业务
		</view>
		<view class="flex_box" v-for="(item,index) in details.items" :key="index">
			<text>{{item.name}}</text>
			<view class="" @click="toDetail(item)">
				开始办理
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: {
					folderCode: '',
					title: '',
					category: '',
					content: ''
				}
			};
		},
		computed: {
			typeName() {
				return (type) => {
					if (type == 'XK') {
						var typeText = '行政许可';
						return typeText;
					} else if (type == 'CF') {
						var typeText = '行政处罚';
						return typeText;
					} else if (type == 'QZ') {
						var typeText = '行政强制';
						return typeText;
					} else if (type == 'ZS') {
						var typeText = '行政征收';
						return typeText;
					} else if (type == 'QR') {
						var typeText = '行政确认';
						return typeText;
					} else if (type == 'JL') {
						var typeText = '行政奖励';
						return typeText;
					} else if (type == 'GG') {
						var typeText = '公共服务';
						return typeText;
					} else if (type == 'JC') {
						var typeText = '行政监督检查';
						return typeText;
					} else {
						var typeText = '其他行政权力';
						return typeText;
					}
				}
			}
		},
		onLoad(option) {
			this.folderCode = option.folderCode;
			this.getItemList()
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/matter/baseInfo?itemCode=' + item.itemCode
				})
			},
			getItemList(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$ajax({
					url: '/api/wwwBiz/getItemList',
					noErrorMsg: true,
					method: 'POST',
					data: {
						folderCode: this.folderCode
					}
				}).then(res => {
					this.details = res.data

				}).finally(() => {
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.container {
		padding: 30rpx 30rpx;
	}

	.details_title {
		font-size: 44rpx;
		font-weight: bolder;
		color: #333;
		text-align: center;
	}

	.details_list_box {
		margin-top: 30rpx;

		.details_list {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 30rpx;
			line-height: 44rpx;
			display: flex;

			text {
				color: #999;
			}

			view {
				flex: 1;
				overflow: hidden;
			}
		}
	}

	.details_small_title {
		font-size: 36rpx;
		position: relative;
		padding-left: 20rpx;
		margin-bottom: 30rpx;

		&::after {
			position: absolute;
			top: 50%;
			left: 0;
			width: 6rpx;
			content: '';
			height: 75%;
			transform: translateY(-50%);
			background-color: #5b96ff;
		}
	}

	.flex_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		text {
			padding-left: 20rpx;
			font-size: 28rpx;
			color: #333;
			flex: 1;
			overflow: hidden;
		}

		view {
			width: 160rpx;
			height: 72rpx;
			color: #fff;
			background-color: #5b96ff;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

		}
	}
</style>
